<template>
  <div class="chinaecharts">
    <div style="position: absolute;margin-top: 10px;width: 90%">
      <span style="font-size: 35px;font-family: 楷体;" >国内疫情图</span>
      <span style="font-size: 25px;font-family: 楷体;margin-left: 10% ">数据更新时间：{{this.informs.times}}</span>
    </div>
      <div id="mapChart" ref="mapChart" style="position: relative"></div>
    <div class="info1" style="position: relative;margin-top: -35%;width: 20%">
      <el-card class="box-card" style="width: 100%">
        <div slot="header" class="clearfix">
          <span style="font-size: 20px">国内疫情</span>
        </div>
        <div class="text item">
          <h1 style="color: #913b3c">累计确诊：{{this.informs.gntotal}}人</h1>
        </div>
        <div class="text item">
          <h1 style="color: #ee464d">现有确诊：{{this.informs.econNum}}人</h1>
        </div>
        <div class="text item">
          <h1 style="color: #5dd06f">累计治愈：{{this.informs.curetotal}}人</h1>
        </div>
        <div class="text item">
          <h1 style="color: #7c2022">累计死亡：{{this.informs.deathtotal}}人</h1>
        </div>
      </el-card>
    </div>
    <div class="info2" style="position: relative;margin-top: -33%;width: 20%;margin-left: 79%">
      <el-card class="box-card" style="width: 100%">
        <div slot="header" class="clearfix">
          <span style="font-size: 20px">世界疫情</span>
        </div>
        <div class="text item">
<!--          {{this.informs.othertotal.certain}}-->
        <h1 style="color: #913b3c">累计确诊：{{this.world.certain}}人</h1>
      </div>
        <div class="text item">
<!--          {{this.informs.othertotal.certain_inc}}-->
          <h1 style="color: #ee464d">新增确诊：{{this.world.certain_inc}}人</h1>
        </div>
        <div class="text item">
<!--          {{this.informs.othertotal.recure}}-->
          <h1 style="color: #5dd06f">累计治愈：{{this.world.recure}}人</h1>
        </div>
        <div class="text item">
<!--          {{this.informs.othertotal.die}}-->
          <h1 style="color: #7c2022">累计死亡：{{this.world.die}}人</h1>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import {VueJsonp} from "vue-jsonp";
import Jsonp from 'jsonp'

export default {
  name: "ChinaEcharts",
  data(){
    return{
      informs:'',
      world:'',
      area:[],
      area1:'',
      area2:'',
      area3:'',
      area4:'',
      area5:'',
      area6:'',
      area7:'',
      area8:'',
      area9:'',
      area10:'',
      area11:'',
      area12:'',
      area13:'',
      area14:'',
      area15:'',
      area16:'',
      area17:'',
      area18:'',
      area19:'',
      area20:'',
      area21:'',
      area22:'',
      area23:'',
      area24:'',
      area25:'',
      area26:'',
      area27:'',
      area28:'',
      area29:'',
      area30:'',
      area31:'',
      area32:'',
      area33:'',
    }
  },
  created() {
    // https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5
    Jsonp("https://interface.sina.cn/news/wap/fymap2020_data.d.json",(err,data)=>{
             console.log(data.data);
             // console.log(JSON.parse(data.data))
             this.informs = data.data
             console.log("hhh",this.informs);
            this.world = data.data.othertotal;
            this.area = data.data.list;
            console.log("map==",this.area);
            this.area1 = this.area[0];
            this.area2 = this.area[1];
            this.area3 = this.area[2];
            this.area4 = this.area[3];
            this.area5 = this.area[4];
            this.area6 = this.area[5];
            this.area7 = this.area[6];
            this.area8 = this.area[7];
            this.area9 = this.area[8];
            this.area10 = this.area[9];
            this.area11 = this.area[10];
            this.area12 = this.area[11];
            this.area13 = this.area[12];
            this.area14 = this.area[13];
            this.area15 = this.area[14];
            this.area16 = this.area[15];
            this.area17 = this.area[16];
            this.area18 = this.area[17];
            this.area19 = this.area[18];
            this.area20 = this.area[19];
            this.area21= this.area[20];
            this.area22= this.area[21];
            this.area23 = this.area[22];
            this.area24 = this.area[23];
            this.area25 = this.area[24];
            this.area26 = this.area[25];
            this.area27 = this.area[26];
            this.area28 = this.area[27];
            this.area29 = this.area[28];
            this.area30= this.area[29];
            this.area31= this.area[30];
            this.area32 = this.area[31];
            this.area33 = this.area[32];
            console.log("area=",this.area2.value)
           });


  },
  methods: {
    mapFn() {
      console.log("aaaa",this.area1.name)
      // 基于准备好的dom，初始化echarts实例
      // var mapChart = this.$echarts.init(this.$refs.mapChart);
      var mapChart = this.$echarts.init(
          document.getElementById("mapChart")
      );
      mapChart.setOption({
        backgroundColor: "", //背景颜色
        title: {
          text: "",
          subtext: "",
          color: "#fff",
          x: "center",
        },
        //是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
        visualMap: {
          // 左下角定义 在选中范围中的视觉元素 渐变地区颜色
          type: "piecewise", // 类型为分段型
          top: "bottom",
          // calculable: true, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
          right: 10,
          splitNumber: 6,
          seriesIndex: [0],
          itemWidth: 20, // 每个图元的宽度
          itemGap: 2, // 每两个图元之间的间隔距离，单位为px
          pieces: [
            // 自定义每一段的范围，以及每一段的文字
            { gte: 10000, label: "10000人以上", color: "#45080c" }, // 不指定 max，表示 max 为无限大（Infinity）。
            {
              gte: 1000,
              lte: 9999,
              label: "1000-9999人",
              color: "#7f0a13",
            },
            {
              gte: 500,
              lte: 999,
              label: "500-999人",
              color: "#b13a41",
            },
            {
              gte: 100,
              lte: 499,
              label: "100-499人",
              color: "#d7787c",
            },
            {
              gte: 1,
              lte: 99,
              label: "1-99人",
              color: "#e6a6ac",
            },
            { lte: 0, label: "无", color: "#FAFAFA" }, // 不指定 min，表示 min 为无限大（-Infinity）。
          ],
          textStyle: {
            color: "#737373",
          },
        },
        // 提示框，鼠标移入
        tooltip: {
          show: true, //鼠标移入是否触发数据
          trigger: "item", //出发方式
          formatter: "{b}-确诊人数：{c}",
        },

        //配置地图的数据，并且显示
        series: [
          {
            name: "地图",
            type: "map", //地图种类
            map: "china", //地图类型。
            data: [
              {
                name: "北京",
                value: Math.round(Math.random() * 500),
              },
              {
                name: "天津",
                value: Math.round(Math.random() * 500),
              },
              {
                name: "上海",
                value: Math.round(Math.random() * 500),
              },
              {
                name: "重庆",
                value: Math.round(Math.random() * 500),
              },
              {
                name: "河北",
                value: Math.round(Math.random() * 500),
              },
              {
                name: "河南",
                value: Math.round(Math.random() * 500),
              },
              {
                name: "云南",
                value: Math.round(Math.random() * 500),
              },
              {
                name: "辽宁",
                value: Math.round(Math.random() * 500),
              },
              {
                name: "黑龙江",
                value: Math.round(Math.random() * 500),
              },
              {
                name: "湖南",
                value: Math.round(Math.random() * 500),
              },
              {
                name: "安徽",
                value: Math.round(Math.random() * 500),
              },
              {
                name: "山东",
                value: Math.round(Math.random() * 5000),
              },
              {
                name: "新疆",
                value: Math.round(Math.random() * 0),
              },
              {
                name: "江苏",
                value: Math.round(Math.random() * 5000),
              },
              {
                name: "浙江",
                value: Math.round(Math.random() * 50000),
              },
              {
                name: "江西",
                value: Math.round(Math.random() * 500),
              },
              {
                name: "湖北",
                value: Math.round(Math.random() * 5000),
              },
              {
                name: "广西",
                value: Math.round(Math.random() * 500),
              },
              {
                name: "甘肃",
                value: Math.round(Math.random() * 0),
              },
              {
                name: "山西",
                value: Math.round(Math.random() * 500),
              },
              {
                name: "内蒙古",
                value: Math.round(Math.random() * 0),
              },
              {
                name: "陕西",
                value: Math.round(Math.random() * 500),
              },
              {
                name: "吉林",
                value: Math.round(Math.random() * 500),
              },
              {
                name: "福建",
                value: Math.round(Math.random() * 500),
              },
              {
                name: "贵州",
                value: Math.round(Math.random() * 500),
              },
              {
                name: "广东",
                value: Math.round(Math.random() * 500000),
              },
              {
                name: "青海",
                value: Math.round(Math.random() * 0),
              },
              {
                name: "西藏",
                value: Math.round(Math.random() * 0),
              },
              {
                name: "四川",
                value: Math.round(Math.random() * 5000),
              },
              {
                name: "宁夏",
                value: Math.round(Math.random() * 500),
              },
              {
                name: "海南",
                value: Math.round(Math.random() * 500),
              },
              {
                name: "台湾",
                value: Math.round(Math.random() * 500),
              },
              {
                name: "香港",
                value: Math.round(Math.random() * 500),
              },
              {
                name: "澳门",
                value: Math.round(Math.random() * 500),
              },
              {
                name: "南海诸岛",
                value: Math.round(Math.random() * 500),
              },
            ],


              // {
              //   name: "北京",
              //   value: 23,
              // },
              // {
              //   name: this.area2.name,
              //   value: this.area2.value,
              // },
              // {
              //   name: this.area3.name,
              //   value: this.area3.value,
              // },
              // {
              //   name: this.area4.name,
              //   value: this.area4.value,
              // },
              // {
              //   name: this.area5.name,
              //   value: this.area5.value,
              // },
              // {
              //   name: this.area6.name,
              //   value: this.area6.value,
              // },
              // {
              //   name: this.area7.name,
              //   value: this.area7.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              // {
              //   name: this.area1.name,
              //   value: this.area1.value,
              // },
              //   ],

            itemStyle: {
              normal: {
                label: {
                  show: true, //默认是否显示省份名称
                },
                areaStyle: {
                  color: "#FAFAFA", //默认的地图板块颜色
                },
                borderWidth: 1,
                borderColor: "#D9D9D9",
              },
              //地图区域的多边形 图形样式。
              emphasis: {
                label: {
                  show: true, //选中状态是否显示省份名称
                },
                areaStyle: {
                  color: "#90c31d", //选中状态的地图板块颜色
                },
              },
            },
            zoom: 1, //放大比例
            label: {
              //图形上的文本标签，可用于说明图形的一些数据信息
              show: true,
            },
          },
          {
            type: "scatter",
            showEffectOn: "render", //配置什么时候显示特效
            coordinateSystem: "geo", //该系列使用的坐标系
            symbolSize: 10, //标记的大小
            data: [{ name: "宜昌", value: [111.3, 30.7, 130] }],
            zlevel: 99999,
          },
        ],
      }),
          window.addEventListener("resize", () => {
            // 自动渲染echarts
            mapChart.resize();
          });
    },
  },
  mounted() {
    this.mapFn();
  },
};
</script>
<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}

.chinaecharts {
  width: 100%;
  height: 600px;
  background-repeat: no-repeat;
  background-size: cover;
}
#mapChart {
  width: 100%;
  height: 600px;
}
</style>
